<template>
  <view class="straight-rail-container">
    <!-- 自定义弹框 -->
    <view class="modal-mask" v-if="showSuccessModal" @click="closeSuccessModal"></view>
    <view class="modal-container" v-if="showSuccessModal">
      <view class="modal-content">
        <view class="modal-title">数据提交成功！</view>
        <view class="modal-text">是否继续添加测量数据？</view>
        <view class="modal-actions">
          <button class="modal-btn secondary" @click="handleComplete">完成</button>
          <button class="modal-btn primary" @click="handleAddNext">添加下一个窗</button>
        </view>
      </view>
    </view>
    <!-- 固定顶部区域 - 状态栏+导航栏 -->
    <view class="fixed-top">
      <status-bar bgColor="#0088ff"></status-bar>
      <view class="nav-bar">
        <view class="back-btn" @click="goBack">
          <image src="/static/images/icon/backward_flat.png" class="back-icon-img"></image>
        </view>
        <view class="nav-title">直轨测量</view>
      </view>
    </view>
    
    <!-- 表单区域 - 包含副标题和表单内容 -->
    <scroll-view scroll-y class="form-container" :style="{
      height: 'calc(100vh - 180rpx - 100rpx)', /* 状态栏+导航栏=180rpx */
      paddingTop: '0',
      marginTop: '180rpx' /* 状态栏+导航栏高度 */
    }">
      <!-- 提示信息栏 - 现在在滚动区域内 -->
      <view class="notice-bar" style="margin-top:20rpx">
        <view class="notice-icon">!</view>
        <text class="notice-text">请认真填写，避免数据出错！确认无误后，再进行提交！</text>
      </view>
      <!-- 成功提交面板 -->
      <view class="success-panel" v-if="showSuccessPanel">
        <view class="success-icon">
          <text class="iconfont icon-success"></text>
        </view>
        <view class="success-title">数据提交成功！</view>
        <view class="success-subtitle">是否继续添加测量数据？</view>
        <view class="success-actions">
          <button class="success-btn complete-btn" @click="handleComplete">完成</button>
          <button class="success-btn next-btn" @click="handleAddNext">添加下一个窗</button>
        </view>
      </view>
      
      <!-- 表单内容 -->
      <view class="form-content" :class="{ 'form-disabled': showSuccessPanel }">
        <!-- 宽度 -->
        <view class="item">
          <view class="item-left required">宽度</view>
          <view class="item-right">
            <input type="digit" class="input-field" v-model="formData.width" placeholder="请输入" />
            <text class="unit">厘米</text>
          </view>
        </view>
        <view class="item sub-item" @click="showWidthTypeSelector">
          <view class="item-left"></view>
          <view class="item-right">
            {{ widthTypeText }} <text class="arrow">›</text>
          </view>
        </view>
        
        <view class="divider"></view>
        
        <!-- 高度 -->
        <view class="item">
          <view class="item-left required">高度</view>
          <view class="item-right">
            <input type="digit" class="input-field" v-model="formData.height" placeholder="请输入" />
            <text class="unit">厘米</text>
          </view>
        </view>
        <view class="item sub-item" @click="showHeightTypeSelector">
          <view class="item-left"></view>
          <view class="item-right">
            {{ heightTypeText }} <text class="arrow">›</text>
          </view>
        </view>
        
        <view class="divider"></view>
        
        <!-- 安装位置选择 -->
        <view class="item" @click="showInstallationTypePopup">
          <view class="item-left required">安装位置</view>
          <view class="item-right">
            {{ installationTypeText }} <text class="arrow">›</text>
          </view>
        </view>
        
        <view class="divider"></view>
        
        <!-- 安装位置相关字段 - 动态显示 -->
        <block v-if="formData.installationType === 'hasCurtainBox'">
          <!-- 窗帘盒宽度 -->
          <view class="item">
            <view class="item-left required">窗帘盒宽度</view>
            <view class="item-right">
              <input type="digit" class="height-input" v-model="formData.curtainBoxWidth" placeholder="0" />
              <text class="unit">厘米</text>
            </view>
          </view>
          <view class="item-tip">注：用于判断是否装得下双层</view>
          
          <!-- 窗帘盒深度 -->
          <view class="item">
            <view class="item-left required">窗帘盒深度</view>
            <view class="item-right">
              <input type="digit" class="height-input" v-model="formData.curtainBoxDepth" placeholder="0" />
              <text class="unit">厘米</text>
            </view>
          </view>
          
          <view class="divider"></view>
        </block>
        
        <block v-if="formData.installationType === 'inFrame'">
          <!-- 框内安装面宽度 -->
          <view class="item">
            <view class="item-left required">框内安装面宽度</view>
            <view class="item-right">
              <input type="digit" class="height-input" v-model="formData.frameInstallWidth" placeholder="0" />
              <text class="unit">厘米</text>
            </view>
          </view>
          
          <view class="divider"></view>
        </block>
        
        <!-- 窗帘布离地高度 -->
        <view class="item">
          <view class="item-left">窗帘布离地高度</view>
          <view class="item-right">
            <checkbox-group @change="handleCustomHeightChange" class="inline-checkbox">
              <label class="checkbox-label">
                <checkbox :checked="formData.isCustomHeight" color="#0088ff" style="transform:scale(0.8)" />
                <text>客户自定</text>
              </label>
            </checkbox-group>
            <checkbox-group @change="() => formData.isCustomHeight = false" class="inline-checkbox">
              <label class="checkbox-label">
                <checkbox :checked="!formData.isCustomHeight" color="#0088ff" style="transform:scale(0.8)" />
                <input type="digit" class="height-input" v-model="formData.manualHeight" placeholder="请输入" :disabled="formData.isCustomHeight" style="width:120rpx" />
                <text class="unit">厘米</text>
              </label>
            </checkbox-group>
          </view>
        </view>
        
        <view class="divider"></view>
        
        <view class="divider"></view>
        
        <!-- 有无窗幔 -->
        <view class="item">
          <view class="item-left">有无窗幔</view>
          <view class="item-right">
            <button :class="['toggle-btn', formData.hasCurtainValance === 'yes' ? 'active' : '']"
              @click="setHasCurtainValance('yes')">有</button>
            <button :class="['toggle-btn', formData.hasCurtainValance === 'no' ? 'active' : '']"
              @click="setHasCurtainValance('no')">无</button>
          </view>
        </view>
        
        <!-- 幔轨实际宽度 - 条件显示 -->
        <view class="item" v-if="formData.hasCurtainValance === 'yes'">
          <view class="item-left">幔轨实际宽度</view>
          <view class="item-right">
            <input type="digit" class="height-input" v-model="formData.valanceRailWidth" placeholder="0" />
            <text class="unit">厘米</text>
          </view>
        </view>
        
        <view class="divider"></view>
        
        <!-- 是否内开窗 -->
        <view class="item">
          <view class="item-left">是否内开窗</view>
          <view class="item-right">
            <button :class="['toggle-btn', formData.hasInwardWindow === 'yes' ? 'active' : '']"
              @click="setHasInwardWindow('yes')">是</button>
            <button :class="['toggle-btn', formData.hasInwardWindow === 'no' ? 'active' : '']"
              @click="setHasInwardWindow('no')">无</button>
          </view>
        </view>
        
        <!-- 内开窗上沿到安装位置距离 - 条件显示 -->
        <view class="item" v-if="formData.hasInwardWindow === 'yes'">
          <view class="item-left">内开窗上沿到安装位置距离</view>
          <view class="item-right">
            <input type="digit" class="height-input" v-model="formData.inwardWindowDistance" placeholder="0" />
            <text class="unit">厘米</text>
          </view>
        </view>
        
        <view class="divider"></view>
        
        <!-- 特殊要求 -->
        <view class="item">
          <view class="item-left">特殊要求</view>
          <view class="item-right"></view>
        </view>
        
        <!-- 特殊要求选项 - 参考room-name-selector样式 -->
        <view class="special-options">
          <view 
            v-for="(option, index) in specialOptions" 
            :key="index"
            class="option-btn"
            :class="{ 'active': formData.specialRequirements.includes(option.value) }"
            @click="toggleSpecialOption(option.value)"
          >
            {{ option.label }}
          </view>
        </view>
        
        <!-- 补充信息文本域 - 全宽显示 -->
        <view class="textarea-container">
          <textarea class="textarea" v-model="formData.additionalInfo" placeholder="请输入补充信息" maxlength="500" />
          <view class="textarea-counter">{{ formData.additionalInfo.length }}/500</view>
        </view>
        
        <view class="divider"></view>
      </view>
    </scroll-view>
    
    <!-- 底部按钮 -->
    <view class="footer">
      <button class="next-btn" @click="handleSubmit">确认提交</button>
    </view>
    
    <!-- 宽度类型选择器弹窗 -->
    <uni-popup ref="widthTypePopup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">选择宽度尺寸类型</text>
          <view class="popup-close" @click="closeWidthTypePopup">关闭</view>
        </view>
        <view class="popup-body">
          <view 
            class="popup-item" 
            v-for="(item, index) in widthTypeOptions" 
            :key="index"
            @click="selectWidthType(item.value)"
          >
            <text>{{ item.label }}</text>
          </view>
        </view>
      </view>
    </uni-popup>
    
    <!-- 高度类型选择器弹窗 -->
    <uni-popup ref="heightTypePopup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">选择高度尺寸类型</text>
          <view class="popup-close" @click="closeHeightTypePopup">关闭</view>
        </view>
        <view class="popup-body">
          <view 
            class="popup-item" 
            v-for="(item, index) in heightTypeOptions" 
            :key="index"
            @click="selectHeightType(item.value)"
          >
            <text>{{ item.label }}</text>
          </view>
        </view>
      </view>
    </uni-popup>
    
    <!-- 安装类型选择器弹窗 -->
    <uni-popup ref="installationTypePopup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">选择安装类型</text>
          <view class="popup-close" @click="closeInstallationTypePopup">关闭</view>
        </view>
        <view class="popup-body">
          <view 
            class="popup-item" 
            v-for="(item, index) in installationTypeOptions" 
            :key="index"
            @click="selectInstallationType(item.value)"
          >
            <text>{{ item.label }}</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 特殊要求选项
      specialOptions: [
        { label: '地板未铺', value: 'floorNotLaid' },
        { label: '需扣拐角', value: 'needCorner' },
        { label: '梁/做切角', value: 'beamCutCorner' },
        { label: '高低差', value: 'heightDifference' }
      ],
      // 表单数据
      formData: {
        width: '',
        widthType: 'productSize', // 默认成品尺寸
        height: '',
        heightType: '', // 高度尺寸类型
        installationType: '', // 安装类型：hasCurtainBox(有窗帘盒), inFrame(框内安装)
        curtainBoxWidth: '', // 窗帘盒宽度
        curtainBoxDepth: '', // 窗帘盒深度
        frameInstallWidth: '', // 框内安装面宽度
        isCustomHeight: false, // 是否客户自定离地高度
        customHeight: '', // 客户自定离地高度
        hasCurtainValance: 'no', // 有无窗幔：yes, no
        valanceRailWidth: '', // 幔轨实际宽度
        hasInwardWindow: 'no', // 是否内开窗：yes, no
        inwardWindowDistance: '', // 内开窗上沿到安装位置距离
        heightReference: 'boxTopToGround', // 高度参考点
        specialRequirements: [], // 特殊要求
        additionalInfo: '' // 补充信息
      },
      
      // 宽度类型选项
      widthTypeOptions: [
        { label: '成品尺寸', value: 'productSize' },
        { label: '框内实际尺寸', value: 'frameActualSize' },
        { label: '满墙尺寸', value: 'fullWallSize' }
      ],
      
      // 高度类型选项
      heightTypeOptions: [
        { label: '成品尺寸', value: 'productSize' },
        { label: '框内实际尺寸', value: 'frameActualSize' },
        { label: '满墙尺寸', value: 'fullWallSize' }
      ],
      
      // 安装类型选项
      installationTypeOptions: [
        { label: '有窗帘盒', value: 'hasCurtainBox' },
        { label: '框内安装', value: 'inFrame' },
        { label: '其他', value: 'other' }
      ],
      
      // 是否显示成功面板
      showSuccessPanel: false,
      showSuccessModal: false
    };
  },
  
  computed: {
    // 宽度类型文本
    widthTypeText() {
      const found = this.widthTypeOptions.find(item => item.value === this.formData.widthType);
      return found ? found.label : '请选择宽度尺寸类型 >';
    },
    
    // 高度类型文本
    heightTypeText() {
      const found = this.heightTypeOptions.find(item => item.value === this.formData.heightType);
      return found ? found.label : '请选择高度尺寸类型 >';
    },
    
    // 安装位置类型文本
    installationTypeText() {
      const found = this.installationTypeOptions.find(item => item.value === this.formData.installationType);
      return found ? found.label : '请选择安装位置 >';
    }
  },
  
  methods: {
    // 切换特殊要求选项
    toggleSpecialOption(value) {
      const index = this.formData.specialRequirements.indexOf(value);
      if (index === -1) {
        this.formData.specialRequirements.push(value);
      } else {
        this.formData.specialRequirements.splice(index, 1);
      }
    },
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 显示宽度类型选择器
    showWidthTypeSelector() {
      this.$refs.widthTypePopup.open();
    },
    
    // 关闭宽度类型选择器
    closeWidthTypePopup() {
      this.$refs.widthTypePopup.close();
    },
    
    // 选择宽度类型
    selectWidthType(value) {
      this.formData.widthType = value;
      this.closeWidthTypePopup();
    },
    
    // 显示高度类型选择器
    showHeightTypeSelector() {
      this.$refs.heightTypePopup.open();
    },
    
    // 关闭高度类型选择器
    closeHeightTypePopup() {
      this.$refs.heightTypePopup.close();
    },
    
    // 选择高度类型
    selectHeightType(value) {
      this.formData.heightType = value;
      this.closeHeightTypePopup();
    },
    
    // 显示安装类型选择器
    showInstallationTypePopup() {
      this.$refs.installationTypePopup.open();
    },
    
    // 关闭安装类型选择器
    closeInstallationTypePopup() {
      this.$refs.installationTypePopup.close();
    },
    
    // 选择安装类型
    selectInstallationType(value) {
      this.formData.installationType = value;
      this.closeInstallationTypePopup();
    },
    
    // 处理客户自定高度变化
    handleCustomHeightChange(e) {
      this.formData.isCustomHeight = e.detail.value.length > 0;
    },
    
    // 设置窗幔选择
    setHasCurtainValance(value) {
      this.formData.hasCurtainValance = value;
    },
    
    // 设置内开窗选择
    setHasInwardWindow(value) {
      this.formData.hasInwardWindow = value;
    },
    
    // 设置高度参考点
    setHeightReference(value) {
      this.formData.heightReference = value;
    },
    
    // 处理特殊要求变化
    handleSpecialRequirementsChange(e) {
      this.formData.specialRequirements = e.detail.value;
    },
    
    // 表单提交
    handleSubmit() {
      // 表单验证
      if (!this.validateForm()) {
        return;
      }
      
      // 显示加载中
      uni.showLoading({
        title: '提交中...'
      });
      
      // 模拟提交
      setTimeout(() => {
        uni.hideLoading();
        this.showSuccessModal = true;
      }, 1000);
    },

    // 关闭弹窗
    closeSuccessModal() {
      this.showSuccessModal = false;
    },

    // 完成操作
    handleComplete() {
      this.closeSuccessModal();
      uni.navigateBack();
    },

    // 添加下一个窗
    handleAddNext() {
      this.closeSuccessModal();
      this.resetForm();
    },
    
    // 表单验证
    validateForm() {
      // 验证宽度
      if (!this.formData.width) {
        uni.showToast({
          title: '请输入宽度',
          icon: 'none'
        });
        return false;
      }
      
      // 验证宽度类型
      if (!this.formData.widthType) {
        uni.showToast({
          title: '请选择宽度尺寸类型',
          icon: 'none'
        });
        return false;
      }
      
      // 验证高度
      if (!this.formData.height) {
        uni.showToast({
          title: '请输入高度',
          icon: 'none'
        });
        return false;
      }
      
      // 验证高度类型
      if (!this.formData.heightType) {
        uni.showToast({
          title: '请选择高度尺寸类型',
          icon: 'none'
        });
        return false;
      }
      
      // 验证窗帘盒相关字段
      if (this.formData.installationType === 'hasCurtainBox') {
        if (!this.formData.curtainBoxWidth) {
          uni.showToast({
            title: '请输入窗帘盒宽度',
            icon: 'none'
          });
          return false;
        }
        
        if (!this.formData.curtainBoxDepth) {
          uni.showToast({
            title: '请输入窗帘盒深度',
            icon: 'none'
          });
          return false;
        }
      }
      
      // 验证框内安装相关字段
      if (this.formData.installationType === 'inFrame') {
        if (!this.formData.frameInstallWidth) {
          uni.showToast({
            title: '请输入框内安装面宽度',
            icon: 'none'
          });
          return false;
        }
      }
      
      // 验证客户自定高度
      if (this.formData.isCustomHeight && !this.formData.customHeight) {
        uni.showToast({
          title: '请输入客户自定离地高度',
          icon: 'none'
        });
        return false;
      }
      
      // 验证窗幔相关字段
      if (this.formData.hasCurtainValance === 'yes' && !this.formData.valanceRailWidth) {
        uni.showToast({
          title: '请输入幔轨实际宽度',
          icon: 'none'
        });
        return false;
      }
      
      // 验证内开窗相关字段
      if (this.formData.hasInwardWindow === 'yes' && !this.formData.inwardWindowDistance) {
        uni.showToast({
          title: '请输入内开窗上沿到安装位置距离',
          icon: 'none'
        });
        return false;
      }
      
      return true;
    },
    
    // 完成按钮处理
    handleComplete() {
      uni.navigateBack();
    },
    
    // 添加下一个窗按钮处理
    handleAddNext() {
      // 重置表单
      this.resetForm();
      
      // 隐藏成功面板
      this.showSuccessPanel = false;
    },
    
    // 重置表单
    resetForm() {
      this.formData = {
        width: '',
        widthType: 'productSize',
        height: '',
        heightType: '',
        installationType: '',
        curtainBoxWidth: '',
        curtainBoxDepth: '',
        frameInstallWidth: '',
        isCustomHeight: false,
        customHeight: '',
        hasCurtainValance: 'no',
        valanceRailWidth: '',
        hasInwardWindow: 'no',
        inwardWindowDistance: '',
        heightReference: 'boxTopToGround',
        specialRequirements: [],
        additionalInfo: ''
      };
    }
  }
}
</script>

<style lang="scss" scoped>
.straight-rail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

/* 固定顶部区域 */
.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #0088ff;
  color: #fff;
  padding: 0 30rpx;
  position: relative;
}

.back-btn {
  position: absolute;
  left: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon-img {
  width: 40rpx;
  height: 40rpx;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
}

/* 提示信息栏 */
.notice-bar {
  background-color: #fff0f0;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.notice-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: #ff3b30;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: bold;
  margin-right: 15rpx;
  flex-shrink: 0;
}

.notice-text {
  color: #ff3b30;
  font-size: 26rpx;
  line-height: 1.5;
  flex: 1;
}

/* 表单容器 */
.form-container {
  margin-top: 180rpx; /* 状态栏+导航栏+提示信息高度 */
  height: calc(100vh - 180rpx - 100rpx); /* 减去顶部和底部高度 */
  padding-bottom: 20rpx;
  position: relative;
}

/* 表单内容 */
.form-content {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.form-disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* 分隔线 */
.divider {
  height: 20rpx;
  background-color: #f5f5f5;
}

/* 表单项 */
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

.sub-item {
  padding-top: 0;
}

.item-left {
  font-size: 28rpx;
  color: #333;
}

.required::after {
  content: '*';
  color: #ff0000;
  margin-left: 8rpx;
}

.item-right {
  font-size: 28rpx;
  color: #666;
  display: flex;
  align-items: center;
}

.arrow {
  color: #999;
  font-size: 40rpx;
  margin-left: 10rpx;
}

.input-field,
.height-input {
  width: 180rpx;
  height: 60rpx;
  text-align: left;
  padding: 0 10rpx;
  font-size: 26rpx;
  border: 1rpx solid #e0e0e0;
  background-color: #f8f8f8;
  border-radius: 4rpx;
}

.unit {
  color: #666;
  font-size: 28rpx;
  margin-left: 10rpx;
}

.item-tip {
  font-size: 24rpx;
  color: #999;
  padding: 0 30rpx 20rpx;
  margin-top: -20rpx;
}

/* 切换按钮 */
.toggle-btn {
  min-width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  color: #666;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  border: none;
  margin-left: 20rpx;
  padding: 0 20rpx;
}

.toggle-btn.active {
  background-color: #0088ff;
  color: #fff;
}

.toggle-btn.full-width {
  width: 100%;
  margin: 10rpx 0;
  margin-left: 0;
}

/* 复选框组 */
.checkbox-group {
  width: 100%;
}

.checkbox-row {
  margin-bottom: 20rpx;
}

.checkbox-label {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #333;
}

/* 文本域 */
.section-title {
  padding: 30rpx;
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  background-color: #fff;
}

.textarea-container {
  padding: 30rpx;
  background-color: #fff;
  position: relative;
}

.textarea {
  width: 100%;
  height: 200rpx;
  font-size: 28rpx;
  padding: 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  box-sizing: border-box;
}

.textarea-counter {
  position: absolute;
  right: 50rpx;
  bottom: 50rpx;
  font-size: 24rpx;
  color: #999;
}

/* 底部按钮 */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
}

.next-btn {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #0088ff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 0;
  border: none;
}

/* 弹窗样式 */
.popup-content {
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.popup-close {
  font-size: 28rpx;
  color: #999;
}

.popup-body {
  padding: 20rpx 0;
  max-height: 60vh;
  overflow-y: auto;
}

.popup-item {
  padding: 30rpx;
  font-size: 30rpx;
  color: #333;
  border-bottom: 1rpx solid #f0f0f0;
}

/* 成功提交面板 */
.success-panel {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 40rpx 20rpx;
  margin: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.success-icon {
  font-size: 80rpx;
  color: #0088ff;
  margin-bottom: 20rpx;
}

.success-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.success-subtitle {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 40rpx;
}

.success-actions {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.success-btn {
  min-width: 240rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 30rpx;
}

.complete-btn {
  background-color: #fff;
  color: #0088ff;
  border: 1rpx solid #0088ff;
}

.next-btn {
  background-color: #0088ff;
  color: #fff;
}

/* 特殊要求选项 */
.special-options {
  display: flex;
  padding: 20rpx 30rpx;
  background-color: #fff;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.option-btn {
  min-width: 140rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 26rpx;
  color: #999;
  background-color: transparent;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  margin-right: 20rpx;
  padding: 0 20rpx;
  white-space: nowrap;
  flex-shrink: 0;
}

.option-btn:last-child {
  margin-right: 0;
}

.option-btn.active {
  color: #0088ff;
  border-color: #0088ff;
}

/* 补充信息文本域容器 */
.textarea-container {
  padding: 30rpx;
  background-color: #fff;
  position: relative;
}

/* 弹框样式 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  padding: 24px;
}

.modal-content {
  display: flex;
  flex-direction: column;
}

.modal-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 16px;
}

.modal-text {
  font-size: 14px;
  color: #666;
  text-align: center;
  margin-bottom: 24px;
}

.modal-actions {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.modal-btn {
  flex: 1;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  background-color: transparent;
  border: 1px solid #a0d0ff;
}

.modal-btn.primary {
  color: #0088ff;
}

.modal-btn.primary:active {
  background-color: rgba(0, 136, 255, 0.1);
}

.modal-btn.secondary {
  color: #666;
}

.modal-btn.secondary:active {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 补充信息文本域 */
.textarea {
  width: 100%;
  height: 150rpx;
  font-size: 28rpx;
  padding: 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  box-sizing: border-box;
  background-color: #f8f8f8;
}

.textarea-counter {
  position: absolute;
  right: 50rpx;
  bottom: 50rpx;
  font-size: 24rpx;
  color: #999;
}
</style>